<h4>mat-select</h4>
<mat-form-field>
  <mat-label>Choose one</mat-label>
  <mat-select [formControl]="selected" [errorStateMatcher]="matcher">
    <mat-option>Clear</mat-option>
    <mat-option value="valid">Valid option</mat-option>
    <mat-option value="invalid">Invalid option</mat-option>
  </mat-select>
  <mat-hint>Errors appear instantly!</mat-hint>
  @if (selected.hasError('required')) {
    <mat-error>You must make a selection</mat-error>
  }
  @if (selected.hasError('pattern') && !selected.hasError('required')) {
    <mat-error>Your selection is invalid</mat-error>
  }
</mat-form-field>

<h4>native html select</h4>
<mat-form-field class="demo-full-width">
  <mat-label>Choose one</mat-label>
  <select matNativeControl [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
    <option value=""></option>
    <option value="valid" selected>Valid option</option>
    <option value="invalid">Invalid option</option>
  </select>
  @if (nativeSelectFormControl.hasError('required')) {
    <mat-error>You must make a selection</mat-error>
  }
  @if (nativeSelectFormControl.hasError('pattern') && !nativeSelectFormControl.hasError('required')) {
    <mat-error>Your selection is invalid</mat-error>
  }
</mat-form-field>
